<template>
	<!-- 导航 -->
	<el-aside>
		<el-col :span="24">
			<el-menu default-active="2" class="el-menu-vertical-demo" :default-active="this.$route.path" @click='changeView'
			 @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#fff">
				<el-menu-item index="/Home" @click='changeView("/Home",0)' class="no-child-nav">
					<template slot="title">
						<img src="@/assets/img/icon_shouye_s.png" style="padding: 7px;" />
						<span> 系统首页</span>
					</template>
				</el-menu-item>
				<el-submenu v-for='(item,index) in list' v-if='item.permissionType == 1' :key="index" :index='index+ ""'>
					<template slot="title">
						<img src="@/assets/img/icon_qiyeguanli_s.png" style="padding: 7px;" />
						<span>{{item.permissionName}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for='(_item,_index) in item.children' :key="_index" v-if='_item.permissionType == 1' :index="_item.url"
						 @click='changeView(_item.url,index)'>{{_item.permissionName}}</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

				<!-- <el-submenu index="1">
            <template slot="title">
              <img src="@/assets/img/icon_qiyeguanli_s.png" style="padding: 7px;" />
              <span>企业管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/CompanySearch" @click='changeView("/CompanySearch")'>企业查询</el-menu-item>
              <el-menu-item index="/MyCompany" @click='changeView("/MyCompany")'>我的企业</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
		  <el-submenu index="2">
		    <template slot="title">
		      <img src="@/assets/img/icon_yonghuguanli_s.png" style="padding: 7px;" />
		      <span>部门管理</span>
		    </template>
		    <el-menu-item-group>
		      <el-menu-item index="/DepSearch" @click='changeView("/DepSearch")'>部门信息查询</el-menu-item>
		    </el-menu-item-group>
		  </el-submenu>
		  <el-submenu index="3">
		    <template slot="title">
		      <img src="@/assets/img/icon_gangweiguanli_s.png" style="padding: 7px;" />
		      <span>岗位管理</span>
		    </template>
		    <el-menu-item-group>
		      <el-menu-item index="/PositionSearch" @click='changeView("/PositionSearch")'>岗位信息查询</el-menu-item>
		  
		    </el-menu-item-group>
		  </el-submenu>
		  <el-submenu index="4">
		    <template slot="title">
		      <img src="@/assets/img/icon_yonghuguanli_s.png" style="padding: 7px;" />
		      <span>权限管理</span>
		    </template>
		    <el-menu-item-group>
		      <el-menu-item index="/PermissionSearch" @click='changeView("/PermissionSearch")'>权限信息查询</el-menu-item>
		  
		    </el-menu-item-group>
		  </el-submenu>
		  <el-submenu index="5">
		    <template slot="title">
		      <img src="@/assets/img/icon_yonghuguanli_s.png" style="padding: 7px;" />
		      <span>员工管理</span>
		    </template>
		    <el-menu-item-group>
		      <el-menu-item index="/StaffSearch" @click='changeView("/StaffSearch")'>员工信息查询</el-menu-item>
		  
		    </el-menu-item-group>
		  </el-submenu>
       
         <el-submenu index="6">
            <template slot="title">
              <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
              <span>车辆管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/car" @click='changeView("/car")'>车辆信息查询</el-menu-item>
              <el-menu-item index="/carcheck" @click='changeView("/carcheck")'>车辆信息审核</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
		  <el-submenu index="7">
		     <template slot="title">
		       <img src="@/assets/img/icon_yonghuguanli_s.png" style="padding: 7px;" />
		       <span>客户管理</span>
		     </template>
		     <el-menu-item-group>
		       <el-menu-item index="/ClientSearch" @click='changeView("/ClientSearch")'>客户信息查询</el-menu-item>
		     </el-menu-item-group>
		   </el-submenu>
		   <el-submenu index="8">
		      <template slot="title">
		        <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
		        <span>角色管理</span>
		      </template>
		      <el-menu-item-group>
		        <el-menu-item index="/RoleSearch" @click='changeView("/RoleSearch")'>角色信息查询</el-menu-item>
		      </el-menu-item-group>
		    </el-submenu>
		  <el-submenu index="9">
		     <template slot="title">
		       <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
		       <span>区域管理</span>
		     </template>
		     <el-menu-item-group>
		       <el-menu-item index="/AreaSearch" @click='changeView("/AreaSearch")'>区域信息查询</el-menu-item>
		     </el-menu-item-group>
		   </el-submenu>
		   <el-submenu index="10">
		      <template slot="title">
		        <img src="@/assets/img/icon_zhandianguanli_s.png" style="padding: 7px;" />
		        <span>站点管理</span>
		      </template>
		      <el-menu-item-group>
		        <el-menu-item index="/StationSearch" @click='changeView("/StationSearch")'>站点信息查询</el-menu-item>
		      </el-menu-item-group>
		    </el-submenu>
			<el-submenu index="11">
			   <template slot="title">
			     <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
			     <span>司机管理</span>
			   </template>
			   <el-menu-item-group>
			     <el-menu-item index="/DriverSearch" @click='changeView("/DriverSearch")'>司机信息查询</el-menu-item>
			   </el-menu-item-group>
			 </el-submenu>
			 <el-submenu index="12">
			    <template slot="title">
			      <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
			      <span>优惠券管理</span>
			    </template>
			    <el-menu-item-group>
			      <el-menu-item index="/CouponSearch" @click='changeView("/CouponSearch")'>优惠券信息查询</el-menu-item>
			    </el-menu-item-group>
			  </el-submenu>
			  <el-submenu index="13">
			     <template slot="title">
			       <img src="@/assets/img/icon_cheliangguanli_s.png" style="padding: 7px;" />
			       <span>设备管理</span>
			     </template>
			     <el-menu-item-group>
			       <el-menu-item index="/DeviceSearch" @click='changeView("/DeviceSearch")'>设备信息查询</el-menu-item>
			     </el-menu-item-group>
			   </el-submenu>
			   <el-submenu index="14">
			      <template slot="title">
			        <img src="@/assets/img/icon_dianchiguanli_s.png" style="padding: 7px;" />
			        <span>电池管理</span>
			      </template>
			      <el-menu-item-group>
			        <el-menu-item index="/BatterySearch" @click='changeView("/BatterySearch")'>电池信息查询</el-menu-item>
			      </el-menu-item-group>
			    </el-submenu> -->


			</el-menu>
		</el-col>
	</el-aside>
</template>
<script type="text/javascript">
	import Global from '@/components/Global.vue'
	import eventBus from '@/assets/js/eventBus'
	export default {
		props:['type'],
		data() {
			return {
				list: [],
				path: '',
				
			}
		},
		mounted() {
			this.get_power();
			this.get_control();	
		},
		watch: {
			// type(){
			// 	this.path = '/workform/nextStep';
			// },
			path() {
				console.log(1);
				if(this.path == '/Home'){
					this.$emit('changeview', [this.path, this.list[0]]);
					return;
				}
				// console.log(this.list);
				var length = this.list.length;
				for (var i = 0; i < length; i++) {
					if (this.list[i].hasOwnProperty('children')) {
						var _len = this.list[i].children.length;
						for (var j = 0; j < _len; j++) {
							if (this.path == this.list[i].children[j].url) {
								if(this.list[i].children[j].hasOwnProperty('children')){
									this.$emit('changeview', [this.path, this.list[i].children[j]]);
								}else{
									this.$emit('changeview', [this.path, this.list[i]]);
								}
								break;
							}
						}
					}
				}
			}
		},
		methods: {
			get_control(){
				let self=this;
				eventBus.$on('control',function(res){
					// self.randow=res;
					self.path = res;
				})
			},
			get_power() {
				var self = this;
				$.ajax({
					url: Global.serverIp + 'jianeng-admin/permission/findNavTree/' + localStorage.getItem("username"),
					xhrFields: {
						withCredentials: true
					},
					beforeSend: function(request) {
						request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
					},
					contentType: 'application/json;charset=utf-8',
					dataType: 'json',
					type: 'get',
					success: function(res) {
						console.log(res);
						if (res.code == Global.success_code) {
							self.list = self.toTree(res.data);
							self.path = self.$route.path;
							// console.log(self.list);
						} else {
							self.open(res.msg, false);
						}
					},
					error: function(res) {
						if(res.responseJSON.code == '040005'){
							self.open("登录过期", true);
						}else{
							self.open("请求失败", false);
						}
					}
				})
			},
			toTree(data) {
				let result = []
				if (!Array.isArray(data)) {
					return result
				}
				data.forEach(item => {
					delete item.children;
				});
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
			changeList(list) {

			},
			open(content, flag) {
				var self = this;
				this.$alert(content, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						if (flag)
							self.$router.push('/');
					}
				});
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			changeView(url, index) {
				this.path = url;
				// alert(this.path);
				// alert(index);
				// console.log(this.list[index]);
				// return;

			}
		}
	}
</script>
<style>
	.el-aside li {
		width: 212px;
	}
</style>
